import React from "react";
import bgSrc from "../../../res/images/web/euro/EURO方案bg@2x.png"
import ruleBtnSrc from "../../../res/images/web/euro/规则说明@2x.png"
import mallBtnSrc from "../../../res/images/web/euro/应豆商城@2x.png"
import douBtnSrc from "../../../res/images/web/euro/领取应豆-不可领@2x.png"
import winBtnSrc from "../../../res/images/web/euro/领取应豆-可领@2x.png"
import rankBtnSrc from "../../../res/images/web/euro/排行榜@2x.png"
import countSrc from "../../../res/images/web/euro/方案+@2x.png"
import {Icon, Modal, Tabs, Toast} from "antd-mobile";
import TabWithCustomUnderline from "../../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import {pushWithSearch, searchParams} from "../../mall/mall";
import LocalStorageService from "../../../utils/LocalStorageService";
import {getDouReq, getDouStatusReq, getMyEuroPlanListReq, getMyEuroPlanReq} from "../../../apis/goApis";
import {withRouter} from 'react-router-dom'
import {log} from "../../../utils/commonfunc";
import {checkAndGoBack} from "../../best-line-up/best-line-up";
import EuroGameCard from "./euro-game-card";
import noDataSrc from "../../../res/images/web/euro/wushuju@2x.png"
import {addLinkAndClick} from "../../GradePlayer/GradePlayer";
import {test} from "../../../utils/constants";

class MyEuroPlan extends React.Component {
    constructor(props) {
        super(props)
        this.searchParams = searchParams()
        this.uid = this.searchParams.webview === 'true' ? this.searchParams.uid : LocalStorageService.get('userid')
        this.tabs = [
            {title: '当前方案',},
            {title: '历史方案',},
        ]
        this.state = {
            red: 0,
            dou: 0,
            support: 0,
            flag: 1,
            p: 0,
            list: [],
            win: false,
        }
    }

    componentDidMount() {
        if (this.uid) {
            this.myPlan()
            this.getPlan()
            this.getIsWin()
            // this.getUserGold()
        }

    }

    myPlan = () => {
        const params = {
            Uid: this.uid,
        }

        getMyEuroPlanReq(params)
            .then((res) => {
                console.log(res.data)
                const data = res.data
                if (data.ok === 1) {
                    this.setState({
                        red: data.fanhong,
                        dou: data.yd,
                        support: data.zhichi,
                    })
                }
            })
    }

    getPlan = () => {
        const params = {
            Uid: this.uid,
            Flag: this.state.flag,
            P: this.state.p
        }
        getMyEuroPlanListReq(params)
            .then(res => {
                const data = res.data
                const list = []
                data.scheme.map((s, i) => list.push({...s, ...data.match[i]}))
                if (data.ok === 1) {
                    this.setState({
                        list: [...this.state.list, ...list,],
                    })
                }
            })
    }

    getIsWin = () => {
        getDouStatusReq({Uid: this.uid})
            .then(res => {
                const data = res.data
                if (data.ok) {
                    this.setState({
                        win: data.ishave > 0,
                    })
                }
            })
    }

    onTabChange = (tab, index) => {
        log(tab, index)
        this.setState({
            flag: index + 1,
            p: 0,
            list: [],
        }, () => this.getPlan())
    }

    getDou = () => {
        getDouReq({
            Uid: this.uid,
        })
            .then(res => {
                const data = res.data
                if (data.ok) {
                    if (data.addyd > 0) {
                        Toast.success('成功领取应豆')
                        this.myPlan()
                        this.getIsWin()
                    } else {
                        Toast.info('无可领取的应豆')
                    }
                }
            })
    }

    goToEuroPlan = (game, home = true) => {
        log(game)
        // this.goTo('euro-plan/' + game.Id)
        if (this.uid) {
            const status = game.State
            if (status >= 2 && status <= 7) {
                Toast.info('比赛已开始，无法支持')
            } else {
                pushWithSearch(this.props.history, './euro-plan/' + game.Id, {home,})
            }
        }
    }

    goToMall = () => {
        if (this.searchParams.webview === 'true') {
            const base = test ? 'http://123.207.85.242:8080/' : 'http://www.youtoball.com:8080/'
            const end = 'euro_mall'
            addLinkAndClick(base + end)
        } else {
            pushWithSearch(this.props.history, './mall')
        }

        // this.props.history.push('./mall')
    }

    goToRank = () => {
        pushWithSearch(this.props.history, './euro-plan-rank')
        // this.props.history.push('./euro-plan-rank')
    }

    alertRule = () => {
        Modal.alert(
            '投票规则说明',
            <div style={{textAlign: 'left',}}>
                <p>1. 每一场比赛都有对应的专家方案，用户可以消耗金币支持方案。</p>
                <p>2. 当用户支持的方案翻红时，可以获得对应倍数的应豆。</p>
                <p>3. 应豆可以前往应豆商城兑换相应的物品。</p>
                <p>4. 翻红为支持的队伍获胜，走为平，黑为失败。</p>
                <p>5. 当支持的队伍赛果为走时，退回消耗的金币。</p>
                <p>6. 当支持的队伍赛果为黑时，不退回金币。</p>
                <p>7. 每场翻红获得应豆数值不同，会根据队伍强弱调整。</p>
                <p>8. 本活动纯属娱乐，最终解释权归本平台所有。</p>
                {/*<p style={{marginBottom: '8px',}}>4. 一经发现投票内容有违法法律规定，平台有权强制关闭vip包厢；</p>*/}
                {/*<p style={{color: '#333',}}>本平台拥有最终解释权，如有问题，请及时联系客服；</p>*/}
            </div>,
            [
                {
                    text: '我知道了',
                    onPress: () => {

                    },
                    style: {color: '#FFA500',}
                }
            ]
        )
    }

    render() {
        const list = this.state.list
        return (
            <>
                <div className='my-euro-plan-header'>
                    <div className='my-euro-plan-header-top'>
                        <Icon type='left'
                              color='#fff'
                              size='lg'
                              className='my-euro-plan-header-top-goback'
                              onClick={() => checkAndGoBack(this.props.history, './euro')}
                        />
                        <p className='my-euro-plan-header-top-title'>欧洲杯方案</p>
                        <p className='my-euro-plan-header-top-sub-title'>翻红得奖励</p>
                        <img src={ruleBtnSrc} alt='' className='my-euro-plan-header-top-button' onClick={this.alertRule}/>
                    </div>
                    <div className='my-euro-plan-header-mid'>
                        <div className='my-euro-plan-header-mid-item'>
                            <p className='my-euro-plan-header-mid-item-text'>支持 (份)</p>
                            <p className='my-euro-plan-header-mid-item-int'>{this.state.support}</p>
                        </div>
                        <div className='my-euro-plan-header-mid-item'>
                            <p className='my-euro-plan-header-mid-item-text'>我的应豆</p>
                            <p className='my-euro-plan-header-mid-item-int'>{this.state.dou}</p>
                        </div>
                        <div className='my-euro-plan-header-mid-item'>
                            <p className='my-euro-plan-header-mid-item-text'>翻红 (份)</p>
                            <p className='my-euro-plan-header-mid-item-int'>{this.state.red}</p>
                        </div>
                    </div>
                    <div className='my-euro-plan-header-bottom'>
                        <img src={mallBtnSrc} alt='' onClick={this.goToMall}/>
                        <img src={this.state.win ? winBtnSrc : douBtnSrc} alt='' onClick={this.getDou}/>
                        <img src={rankBtnSrc} alt='' onClick={this.goToRank}/>
                    </div>
                </div>
                <TabWithCustomUnderline
                    tabs={this.tabs}
                    tabBarBackgroundColor='#fff'
                    tabBarActiveTextColor="#333"
                    tabBarUnderlineStyle={{border: '2px #36C8B9 solid', width: '20%', left: '25%'}}
                    tabBarInactiveTextColor='gray'
                    onChange={(tab, index) => this.onTabChange(tab, index)}
                >
                    <div className='my-euro-plan-list'>
                        {list && list.map((game, index) => <EuroGameCard game={game} key={index} goToEuroPlan={this.goToEuroPlan}/>)}
                        {list.length === 0 && <div className='my-euro-plan-list-no-data'>
                            <img src={noDataSrc} alt=''/>
                            <p>还没有方案支持哦～</p>
                            <button
                                onClick={() => checkAndGoBack(this.props.history, './euro')}
                            >
                                去支持
                            </button>
                        </div>}
                    </div>
                </TabWithCustomUnderline>
            </>
        )
    }
}

export default withRouter(MyEuroPlan)